<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script>

        const lis = document.querySelectorAll('ul>li');
        // for(let i = 0;i<lis.length;i++){
        //     lis[i].addEventListener('click',()=>{
        //         console.log(i+1)
        //     })
        // }
        // 其他实习方法
        for(var i = 0;i<lis.length;i++){
            addClickListener(i)
        }
        function addClickListener(i){
            lis.addEventListener('click',()=>{
                console.log(i)
            },fasle  )
        }




        // 作用域 Scope  全局作用域
        // document统管html对象 负责HTML、CSS、JS的渲染工作
        // window 是一个新的进程  document 类似于线程
        // 进程：资源分配的最小单元
        // 线程：代码运行的最小单元

        // let也会进行变量提升，但是提升的位置与var创建的空间对象不同，let的调用栈是处于 “临时暂死区”

        // JS的goodparts and badparts 变量提升是badparts。因为看过去和运行是不一致的
        // LET是用来修补变量提升这个BUG的方案。因为js运行机制无法改变，所以无法避免变量提升。即让传统的错误可以运行，同时又出新的方案。
        // let和const是词法语义

        var testValue = 123;
        var testFunc = function(){
            console.log('just test'); 
        }

        // let ddc = "滴滴陈"; //let与var有区别
        // function foo(value){
        //     a = 1;
        // }
        // foo();
        // console.log(a);

        // {
        //     let i = 1;
        //     var c = 2;
        // }
        // console.log(i);
        var name = 'Lionel';
        // window.locae34lStorage.setItem('username',name)
    </script>

</body> 
</html>